/*
 * @Description:  Redux DevTools
 * @Author: 闫宇韬(18064986)
 * @Date: 2020-11-23 15:21:36
 * @LastEditTime: 2020-11-25 14:18:25
 * @LastEditors: 闫宇韬(18064986)
 */
import React, { Component } from 'react';
import store from '../store/index.js';

class Index extends Component {
    constructor(props) {
        super(props);
        console.log('getState--->',store.getState())
        this.state = {}
        this.setState(store.getState())

        //订阅redux的状态
        store.subscribe(this.storeChange.bind(this)) 
    }
    render() { 
        return (
            <div>
                <h2>{this.state.inputValue}</h2>
                <input  placeholder={this.state.inputValue} 
                onChange={this.changeInputValue.bind(this)}/>
            </div>
        );
    }

    storeChange(){
        this.setState(store.getState())
    }

    changeInputValue(e){
        console.log(e.target.value)
        const action ={
            type:'change_input_value',
            value:e.target.value
        }
        //派发消息修改redux state action接收修改state
        store.dispatch(action)
    }
}

export default Index;